import React, { useEffect, useState } from 'react';
import { HotTable } from '@handsontable/react';

import 'handsontable/dist/handsontable.full.css';
import '@/handsontable.less';
import { toJS } from '@formily/reactive';

export interface EditExcelProps {
    colHeaders: any,
    columns: any,
    hiddenColumns: any,
    value: any,
    onChange?: any,
    loading?: boolean,
}
const hotTableComponent: any = React.createRef();
let ruleCodes: any = {};
const EditExcel: React.FC<EditExcelProps> = (props) => {
const initData = [['', '', '', '']];
  const {
      colHeaders, columns,
      hiddenColumns, value, loading = false } = props;
  const [data, setData] = useState<any>(initData);
  const [currentData, setCurData] = useState<any>(null);
  useEffect(() => {
    if (value) {
        const v = toJS(value)
        // 更新 value
        setData(v)
        setTimeout(() => {
            hotTableComponent.current.hotInstance.loadData(v);
        }, 1)
    }
} ,[value]);

  return (
        <>
            {/* <Spin spinning={loading}> */}
              <HotTable
                ref={hotTableComponent}
                autoColumnSize
                licenseKey="non-commercial-and-evaluation"
                data={data}
                rowHeaders
                afterChange={(data, b) => {
                    if (hotTableComponent.current) {
                        console.log('data', hotTableComponent.current.hotInstance.getData())
                    }
                }}
                colHeaders={colHeaders}
                columns={columns}
                startRows={1}
                height={400}
              />
          {/* </Spin> */}
        </>
  );
};
export default EditExcel;
